<template>
  <div class="usermanager_box">
  <div class="bar_box"><Bar/></div>
  <div class="content_box">
    <el-page-header @back="goBack" content="用户文章列表" class="goback"></el-page-header>
    <div class="table_box">
       <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="文章编号"
          width="80">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.articleId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="文章标题"
          width="300">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="创建日期"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-time" style="cursor: pointer;"></i>
            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="预览"
          width="80">
          <template slot-scope="scope">
            <i class="el-icon-view" style="margin-left: 10px; cursor: pointer;" @click="toPage(scope.row.articleId)"></i>
          </template>
        </el-table-column>
         <el-table-column
          label="文章状态"
          width="180">
          <template slot-scope="scope">
              <el-button type="primary" >已通过</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
     <div class="buttom"><ButtomBox/></div>
  </div>  
</template>

<script>
import {getArticleById} from '@/api/api'
import ButtomBox from '../components/ButtomBox.vue'
import Bar from '../components/Bar.vue'
export default {
  name: 'UserArt',
  components:{
    ButtomBox,Bar
  },
  created(){
    if( this.$route.params.userid){
      this.userid = this.$route.params.userid
    }
    else{
      this.userid = localStorage.getItem('userid')
    }
   getArticleById(this.userid).then((response) => {
      console.log('getArticleById',response)
         this.tableData=response.data
      })
  },
  data(){
    return{
      to:'',
      userid:'',
      tableData: []
    }
  },
  methods:{
    toPage(key){
      localStorage.setItem('articleId',key)
      localStorage.setItem('userid_ban',this.userid)
      localStorage.setItem('to','User')
      this.$router.push({
        name:'ArticleDetail',
         params:{
          to:'User',
          articleId:key,
          userid_ban:this.userid
        }
      })
    },
    goBack(){
      this.$router.push(
        {
          name:'Manager'
        }
      )
    }
  }
}
</script>

<style>
.goback{
 margin-top: 1vh;
  background-color: #fff;
  margin-bottom: 1vh;
  height: 5vh;
  align-items: center;
}
.box{
  width: 100vw;
  height: 85vh;
}
.block2{
  margin-top: 2vw;
}
.table_box{
  margin: 0 auto;
  width: 80vw;
}
.el-pagination{
  margin-left: 35vw!important;
}
.search_content{
  margin-top: 3vh;
}
.el-button{
  margin-right: 2vw!important;
}
.button_box{
  margin-top: 3vh;
}
.num{
  width: 7vw;
}
.block{

  margin-left: 2vw;
}
.el-color-picker__icon, .el-input, .el-textarea {
  width: 47%!important;
}
.el-input__inner{
  width: 65%!important;
}
.el-date-editor--daterange{
  width: 100%!important;
}
.search_content{
  display: flex;
  align-items: center;
  text-align: center;
}
.usermanager_box{
  height: 75vh;
}
.usermanager_box_title{
  color: #000;
}
</style>